<template>
  <div class="caigouruku-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button :icon="Search" plain type="primary" @click="openQueryDialog">
          查询
        </el-button>
        <el-button :icon="Plus" plain type="primary" @click="toAddBox">
          新增
        </el-button>
        <el-button :icon="Edit" plain type="primary" @click="toEditBox">
          修改
        </el-button>
        <el-button :icon="Delete" plain type="primary" @click="toDeleteBox">
          删除
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>
    <el-table
      :data="pickingBoxList"
      highlight-current-row
      @current-change="handleCurrentChange"
    >
      <el-table-column label="序号" type="index" width="80" />
      <el-table-column
        align="center"
        label="包装方式编码"
        prop="pickingBoxCode"
        width="200"
      />
      <el-table-column
        align="center"
        label="包装方式名称"
        prop="pickingBoxName"
        width="200"
      />
      <el-table-column
        align="center"
        label="创建人"
        prop="createUser"
        width="200"
      />
      <el-table-column
        align="center"
        label="创建时间"
        prop="createTime"
        width="200"
      />
      <el-table-column
        align="center"
        label="更新人"
        prop="updateUser"
        width="200"
      />
      <el-table-column
        align="center"
        label="更新时间"
        prop="updateTime"
        width="200"
      />
      <el-table-column align="center" label="备注" prop="remark" />
    </el-table>
    <el-pagination
      background
      :current-page="paginationParams.pageNum"
      :layout="layout"
      :page-size="paginationParams.pageSize"
      :total="paginationParams.total"
      @current-change="handlePaginationCurrentChange"
      @size-change="handlePaginationSizeChange"
    />
    <div style="height: 28px"></div>
    <el-row>
      <el-col :span="8">
        <el-card class="cavity-list" header="包装明细列表">
          <template #header>
            <div class="card-header">
              <div style="flex: 1">
                <span style="margin-right: 20px">包装明细列表</span>
                <el-button
                  plain
                  size="small"
                  type="primary"
                  @click="toAddDetail"
                >
                  增行
                </el-button>
                <el-button
                  plain
                  size="small"
                  type="primary"
                  @click="toRemoveDetail"
                >
                  删除
                </el-button>
              </div>
            </div>
          </template>
          <el-table
            :data="boxDetailList"
            highlight-current-row
            @current-change="detailCurrentChange"
          >
            <el-table-column label="序号" type="index" width="80" />
            <el-table-column label="计量单位编码" prop="measCode" width="150" />
            <el-table-column label="计量单位名称" prop="measName" width="150" />
            <el-table-column label="转换率" prop="rate" />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="15" style="margin-left: 5px">
        <el-card class="cavity-list" header="包装存货列表">
          <template #header>
            <div class="card-header">
              <div style="flex: 1">
                <span style="margin-right: 20px">包装存货列表</span>
                <el-button plain size="small" type="primary" @click="toAddInv">
                  增行
                </el-button>
                <el-button
                  plain
                  size="small"
                  type="primary"
                  @click="toRemoveInv"
                >
                  删除
                </el-button>
              </div>
            </div>
          </template>
          <el-table
            :data="boxInvList"
            highlight-current-row
            @current-change="invCurrentChange"
          >
            <el-table-column label="序号" type="index" width="80" />
            <el-table-column label="物料编码" prop="invcode" width="200" />
            <el-table-column label="物料名称" prop="invname" width="230" />
            <el-table-column label="物料规格" prop="invspec" width="230" />
            <el-table-column label="物料型号" prop="invtype" width="230" />
            <el-table-column label="计量单位" prop="mesaName" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <queryDialog ref="queryDialogRef" @success-callback="queryCallback" />
    <AddModuleVue ref="addModuleRef" @success-callback="queryCallback" />
    <DetailModuleVue
      ref="detailModuleVueRef"
      @success-callback="getBoxDetailList"
    />
    <InvSelectVue ref="invSelectRef" @selected-callback="invSelectCallback" />
  </div>
</template>

<script setup>
  import { Search, Plus, Delete, Edit } from '@element-plus/icons-vue'
  import {
    getPickingBoxPageApi,
    getPickingBoxDetailApi,
    getPickingBoxInvApi,
    addPickingBoxInvApi,
    deleteBasePickingBoxApi,
    deletePickingBoxDetailApi,
    deletePickingBoxInvApi,
  } from '@/api/base/base_picking_box_api'
  import { localStorageConfig } from '@/config/localstorage.config'
  import queryDialog from './modules/queryDialog.vue'
  import AddModuleVue from './modules/addModule.vue'
  import DetailModuleVue from './modules/detailModule.vue'
  import InvSelectVue from '@/plugins/InventorySelector/invSelect.vue'

  const $baseLoading = inject('$baseLoading')
  const $baseMessage = inject('$baseMessage')

  const pkCorp = localStorage.getItem(localStorageConfig.__pkCorp)

  const queryForm = ref({ pkCorp: pkCorp })
  const pickingBoxList = ref()
  const boxDetailList = ref()
  const boxInvList = ref()
  const currentRow = ref()
  const invSelectRef = ref()
  const currentDetail = ref()
  const currentInv = ref()

  const paginationParams = reactive({
    pageNum: 1,
    pageSize: 8,
    total: 0,
  })

  //#region pagintion 开始
  const layout = ref('prev, pager, next')
  const handlePaginationCurrentChange = (...args) => {
    paginationParams.pageNum = args[0] ? args[0] : 1
  }
  const handlePaginationSizeChange = (...args) => {
    paginationParams.pageSize = args[0] ? args[0] : 20
    paginationParams.pageNum = 1
  }
  //#endregion

  const queryDialogRef = ref()
  const addModuleRef = ref()
  const detailModuleVueRef = ref()

  const getPickingBoxList = async () => {
    const load = $baseLoading()
    try {
      let params = {
        ...queryForm.value,
        ...paginationParams,
      }
      const { code, msg, data } = await getPickingBoxPageApi(params)
      if (code === 2000) {
        $baseMessage(msg, 'success')
        pickingBoxList.value = data.list
        paginationParams.total = data.total
      } else {
        $baseMessage(msg, 'error')
      }
    } finally {
      load.close()
    }
  }

  const openQueryDialog = () => {
    queryDialogRef.value.openDialog()
  }
  const toAddBox = () => {
    addModuleRef.value.openDialog()
  }

  const toEditBox = () => {
    if (currentRow.value != undefined) {
      addModuleRef.value.openDialog(currentRow.value)
    } else {
      $baseMessage('请选择需要修改的包装方式', 'warning')
    }
  }

  const toAddDetail = () => {
    if (currentRow.value != undefined && currentRow.value.pkPickingBoxH) {
      detailModuleVueRef.value.openDialog({
        pkPickingBoxH: currentRow.value.pkPickingBoxH,
      })
    } else {
      $baseMessage('请选择相应的包装方式', 'warning')
    }
  }

  const queryCallback = (value) => {
    console.log(value)
    queryForm.value = value
    getPickingBoxList()
  }

  const handleCurrentChange = (row) => {
    currentRow.value = row
    getBoxDetailList()
    getBoxInvList()
  }

  const getBoxDetailList = async () => {
    const { code, data } = await getPickingBoxDetailApi({
      pkPickingBoxH: currentRow.value.pkPickingBoxH,
    })
    if (code === 2000) {
      boxDetailList.value = data
    }
  }

  const getBoxInvList = async () => {
    const { code, data } = await getPickingBoxInvApi({
      pkPickingBoxH: currentRow.value.pkPickingBoxH,
    })
    if (code === 2000) {
      boxInvList.value = data
    }
  }

  const toAddInv = () => {
    if (currentRow.value != undefined && currentRow.value.pkPickingBoxH) {
      invSelectRef.value.handleOpen({}, 0)
    } else {
      $baseMessage('请选择相应的包装方式', 'warning')
    }
  }

  const invSelectCallback = async (inventory) => {
    let params = {
      pkPickingBoxH: currentRow.value.pkPickingBoxH,
      pkInv: inventory.pkInv,
    }
    const { code, msg } = await addPickingBoxInvApi(params)
    if (code === 2000) {
      $baseMessage(msg, 'success')
    } else {
      $baseMessage(msg, 'error')
    }
    getBoxInvList()
  }
  const detailCurrentChange = (row) => {
    currentDetail.value = row
  }
  const invCurrentChange = (row) => {
    currentInv.value = row
  }
  const toDeleteBox = async () => {
    const load = $baseLoading()
    if (currentRow.value != undefined && currentRow.value.pkPickingBoxH) {
      try {
        const { code, msg } = await deleteBasePickingBoxApi({
          pkPickingBoxH: currentRow.value.pkPickingBoxH,
        })
        if (code === 2000) {
          $baseMessage(msg, 'success')
        } else {
          $baseMessage(msg, 'error')
        }
      } finally {
        load.close()
      }
      getPickingBoxList()
    } else {
      $baseMessage('请选择相应的包装方式', 'warning')
    }
  }
  const toRemoveDetail = async () => {
    const load = $baseLoading()
    if (currentDetail.value != undefined && currentDetail.value.pkPickingBoxB) {
      try {
        const { code, msg } = await deletePickingBoxDetailApi({
          pkPickingBoxB: currentDetail.value.pkPickingBoxB,
        })
        if (code === 2000) {
          $baseMessage(msg, 'success')
        } else {
          $baseMessage(msg, 'error')
        }
      } finally {
        load.close()
      }
      getBoxDetailList()
    } else {
      $baseMessage('请选择相应的包装明细', 'warning')
    }
  }
  const toRemoveInv = async () => {
    const load = $baseLoading()
    if (currentInv.value != undefined && currentInv.value.pkPickingBoxInv) {
      try {
        const { code, msg } = await deletePickingBoxInvApi({
          pkPickingBoxInv: currentInv.value.pkPickingBoxInv,
        })
        if (code === 2000) {
          $baseMessage(msg, 'success')
        } else {
          $baseMessage(msg, 'error')
        }
      } finally {
        load.close()
      }
      getBoxInvList()
    } else {
      $baseMessage('请选择相应的包装存货', 'warning')
    }
  }

  watch(paginationParams, () => getPickingBoxList())

  onMounted(() => getPickingBoxList())
</script>
